<template>
  <div>
    <img src="../../assets/images/logo.png" class="logo" v-if="showImg" @click="$router.push('/')">
    <div class="login-card-box" :style="{margin: showImg ? '100px auto':'30px auto'}">
      <div class="title-box">
        <span class="login-title" @click="$router.push('/login')">登录</span>
        <span class="point">·</span>
        <span class="register-title" @click="$router.push('/register')">注册</span>
      </div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="" label-width="0" prop="nickname">
          <el-input placeholder="你的昵称" prefix-icon="iconfont icon-gerenzhongxin"  v-model="ruleForm.nickname"></el-input>
        </el-form-item>
        <el-form-item label="" label-width="0" prop="username">
          <el-input placeholder="邮箱地址" prefix-icon="iconfont icon-youxiang-cuxiantiao-fill"  v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="" label-width="0" prop="password">
          <el-input type="password" placeholder="密码" prefix-icon="iconfont icon-mima" v-model="ruleForm.password" @keyup.enter.native="register"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="success" class="login-button" @click="register">{{registerButtonText}}</el-button>
    </div>
    <img src="../../assets/images/logo.png" class="mobile-logo" v-if="!showImg" @click="$router.push('/')">
  </div>
</template>

<script>
  import {mapState,mapMutations} from 'vuex'
  import {register,getUser} from "../../api/user";
  import Cookies from 'js-cookie'
  import NProgress from 'nprogress'
  import axios from 'axios'

  export default {
    name: "index",
    layout:'clean',
    computed:{
      ...mapState('base', {
        showImg: state => state.showImg,
      })
    },
    data(){
      return{
        ruleForm:{
          nickname:'',
          username:'',
          password:''
        },
        registerButtonText:'注册并登录',
        rules: {
          username: [
            {required: true, message: '请输入您的邮箱账号', trigger: 'blur'},
            {type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur'},
          ],
          password: [
            {required: true, message: '请输入您的密码', trigger: 'blur'},
            {min: 8, message: '密码最少为8位', trigger: 'blur'}
          ],
        }
      }
    },
    methods:{
      ...mapMutations('user', [
        'SET_token'
      ]),
      register(){
        let vm=this;
        vm.registerButtonText='快速注册中...';
        NProgress.start();
        vm.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            register(vm.ruleForm).then(res=>{
              NProgress.done();
              Cookies.remove('token');
              Cookies.set('token',res.data.token,{ expires: 7, path: '' });
              axios.defaults.headers.common['Authorization'] = `JWT ${res.data.token}`;
              vm.SET_token(res.data.token);
              vm.$router.push('/');
            }).catch(error=>{
              vm.registerButtonText='注册并登录';
              NProgress.done();
              vm.$message.error('注册失败！');
            })
          } else {
            vm.registerButtonText='注册并登录';
            NProgress.done();
            vm.$message.error('请完整填写信息！');
            return false;
          }
        });
      },
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../stylus/color.styl"

  .login-card-box{
    max-width 400px
  }
  .logo{
    cursor pointer
    width: 100px;
    height: 100px;
    margin 40px 0 0 50px
  }
  .mobile-logo{
    width 60px
    height 60px
    position absolute
    right 15px
    bottom 15px
  }
  .login-button{
    margin 0 auto
    width 100%
  }
  .title-box{
    text-align center
    padding-top  60px
    margin-bottom 50px
  }
  .login-title{
    font-size 18px
    color $color-gray
    cursor pointer
    padding-bottom 5px
  }
  .point{
    font-size 25px
    font-weight 700
    color $color-gray
    margin-left 5px
    margin-right 5px
  }
  .register-title{
    font-size 20px
    font-weight 700
    cursor pointer
    color $color-main
    border-bottom 2px solid $color-main
    padding-bottom 5px
  }

</style>
